<template>
  <div class="overview contents">
    <div class="logo">
      <img class="loginName" :src="logoInfo.substationLogo || initLogo" alt="logo">
      <p>
        <strong>{{ logoInfo.substationName || '求礼品' }}</strong>
        <br>
        <span>{{ logoInfo.domainName || 'qiulipin.com' }}</span>
      </p>
    </div>
    <div class="banner" style="background:#999999;">
      <el-carousel :height="`${bannerHeight}px`" arrow="never">
        <el-carousel-item v-for="(item, index) in bannerArr" :key="index">
          <img :src="item" alt="轮播图">
          <b class="button" @click="$router.push({name: 'ordersNow'})">立即采购</b>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="footer">
      <foot></foot>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import Foot from '../base/foot'
import { mapGetters } from 'vuex'
export default {
  name: 'overview',
  components: {
    Foot
  },
  data () {
    return {
      bannerHeight: 500,
      initLogo: require('../../assets/images/logo.png'),
      bannerArr: [
        require('../../assets/images/banner123.jpg')
      ]
    }
  },
  computed: {
    ...mapGetters([
      'logoInfo'
    ])
  },
  methods: {
    resize () { // 轮播图高度动态设置
      let width = window.innerWidth
      this.bannerHeight = width / 2.85
      if (this.bannerHeight > 650) {
        this.$nextTick(() => {
          this.bannerHeight = 650
        })
      } else if (this.bannerHeight < 500) {
        this.$nextTick(() => {
          this.bannerHeight = 500
        })
      }
    },
    getLogo () {
      this.$ajax.post('/api/logo/getLogo', {
        domain: window.location.host
      }).then((data) => {
        if (data.data.code === '200') {
          this.logoInfoObj = data.data.data
        } else {
          this.$message({
            message: data.data.message,
            type: 'warning'
          })
        }
      }).catch((err) => {
        console.error(err)
        this.$message({
          message: '生意太火爆了, 请稍后再试',
          type: 'error'
        })
      })
    }
  },
  mounted () {
    this.resize()
    window.addEventListener('resize', this.resize)
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.resize)
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../assets/stylus/index.styl'
.overview
  display flex
  flex-direction column
  overflow auto
  .logo
    padding 24px 115px
    display flex
    align-items center
    .loginName
      width 55px
      height 55px
    p
      margin-left 11px
      strong
        font-size 32px
        color #444444
        letter-spacing 4px
      span
        font-size 14px
        color #888888
        letter-spacing 1px
  .banner
    position relative
    img
      width 100%
      height 100%
    .button
      position absolute
      z-index 10
      bottom 100px
      left 0
      right 0
      margin 0 auto
      width 180px
      height 44px
      fontSize(24px, 44px, $mainColor)
      background #ffffff
      border-radius 22px
      text-align center
      cursor pointer
  .footer
    flex 1
    display flex
    flex-direction column
    justify-content flex-end
</style>
